/* eslint-disable no-bitwise */
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AudioDance4 from '..';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const audioDanceRef = useRef(null);

  useEffect(() => {
    const gradientColors = (colors, outCount) => {
      const gap = outCount / (colors.length - 1);
      const outColors = [];
      for (let i = 1; i < colors.length; i += 1) {
        const s = Math.round(gap * (i - 1));
        const e = Math.round(gap * i);
        // window.console.log(String(colors[i - 1]).slice(1, 3), String(colors[i - 1]).slice(3, 5));
        const r1 = parseInt(String(colors[i - 1]).slice(1, 3), 16);
        const g1 = parseInt(String(colors[i - 1]).slice(3, 5), 16);
        const b1 = parseInt(String(colors[i - 1]).slice(5, 7), 16);
        // window.console.log(r1, g1, b1);
        const r2 = parseInt(String(colors[i]).slice(1, 3), 16);
        const g2 = parseInt(String(colors[i]).slice(3, 5), 16);
        const b2 = parseInt(String(colors[i]).slice(5, 7), 16);
        // window.console.log(r2, g2, b2);
        const rsetp = (r2 - r1) / gap;
        const gstep = (g2 - g1) / gap;
        const bstep = (b2 - b1) / gap;
        for (let l = s; l < e; l += 1) {
          const r = Math.round(r1 + rsetp * (l - s));
          const g = Math.round(g1 + gstep * (l - s));
          const b = Math.round(b1 + bstep * (l - s));
          outColors.push(r);
          outColors.push(g);
          outColors.push(b);
        }
      }
      return outColors;
    };
    const palette = new Uint8Array(gradientColors(['#0000FF', '#00FF00', '#FF0000'], 256 * 2));

    const flatten2dArrayTo = (array, target) => {
      let offset = 0;
      for (let y = 0; y < array.length; y += 1) {
        target.set(array[y], offset);
        offset += array[y].length;
      }
    };
    const size = { width: 1400, height: 600 };
    const sourceArr = new Float32Array(size.width * size.height).fill(-999.0);
    const matrix = [];
    setInterval(() => {
      const res = [];
      for (let i = 0; i < size.width; i += 1) {
        if (i < 500 || i > 520) {
          res[i] = Math.random() * 5;
        } else {
          res[i] = 70 + Math.random() * 10;
        }
        if (i === 510 || i === 513) {
          res[i] = 80;
        }
        if (i > 710 && i < 716) {
          res[i] = 30;
        }
      }
      matrix.unshift(res);
      if (matrix.length > size.height) {
        matrix.pop();
      }
      flatten2dArrayTo(matrix, sourceArr);
    }, 20);

    // function draw() {
    //   if (audioDanceRef.current) {
    //     audioDanceRef.current.drawArray(palette, sourceArr, 1400, 600);
    //   }
    //   requestAnimationFrame(draw);
    // }
    // draw();
    setInterval(() => {
      if (audioDanceRef.current) {
        audioDanceRef.current.drawArray(palette, sourceArr, 1400, 600, matrix.length);
      }
    }, 20);
  }, []);

  return (
    <div className={classnames(styles.root, className)}>
      <AudioDance4 ref={audioDanceRef} />
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
